<template>
  <div class="app-container">
    <h4 class="form-header h4">基本信息</h4>
    <el-form ref="formData" :model="formData" label-width="80px" label-position="top">
      <el-row>
        <el-col :span="6" :offset="2">
          <el-form-item label="申请人" prop="createUserName">
            <el-input v-model="formData.createUserName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="2">
          <el-form-item label="申请人所在部门" prop="createDeptName">
            <el-input  v-model="formData.createDeptName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="2">
          <el-form-item label="申请时间" prop="createTime">
            <el-date-picker v-model="formData.createTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择申请时间" disabled></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="6" :offset="2">
          <el-form-item label="需求日期" prop="demandTime">
            <el-date-picker v-model="formData.demandTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择需求日期" disabled></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="6" :offset="2">
          <el-form-item label="需求类型" prop="demandType" >
            <el-radio-group v-model="formData.demandType" disabled>
              <el-radio label="0">自采</el-radio>
              <el-radio label="1">租赁</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="6" :offset="2">
          <el-form-item label="采购计划事由" prop="procurePlanReason">
            <el-input v-model="formData.procurePlanReason" type="textarea" placeholder="请输入采购计划事由"
                      :autosize="{minRows: 4, maxRows: 4}" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <h4 class="form-header h4">明细信息</h4>
      <el-table v-loading="loading"  :data="procurePlanDetailList.slice((pageNum-1)*pageSize,pageNum*pageSize)" show-summary>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="子单号">
                <span>{{ scope.row.planDetailId }}</span>
              </el-form-item>
              <el-form-item label="产品名称">
                <span>{{ scope.row.productName }}</span>
              </el-form-item>
              <el-form-item label="产品类型">
                <span>{{ scope.row.productCategory }}</span>
              </el-form-item>
              <el-form-item label="规格型号">
                <span>{{ scope.row.specificationModle }}</span>
              </el-form-item>
              <el-form-item label="计量单位">
                <span>{{ scope.row.measurementUnit }}</span>
              </el-form-item>
              <el-form-item label="单价">
                <span>{{ scope.row.unitPrice }}（元）</span>
              </el-form-item>
              <el-form-item label="采购数量">
                <span>{{ scope.row.procureQuantity }}</span>
              </el-form-item>
              <el-form-item label="预算金额">
                <span>{{ scope.row.budgetAmount }}（元）</span>
              </el-form-item>
              <el-form-item label="已申请数量">
                <span>{{ scope.row.appliedQuantity }}</span>
              </el-form-item>
              <el-form-item label="未申请数量">
                <span>{{ scope.row.unappliedQuantity }}</span>
              </el-form-item>
              <el-form-item label="采购用途">
                <dict-tag :options="dict.type.a_procure_purpose" :value="scope.row.procurePurpose"/>
              </el-form-item>
              <el-form-item label="任务进度">
                <dict-tag :options="dict.type.fa_plan_tast_status" :value="scope.row.procureTastStatus"/>
              </el-form-item>
              <el-form-item label="产品线">
                <span>{{ scope.row.productLineId }}</span>
              </el-form-item>
              <el-form-item label="备注">
                <span>{{ scope.row.remarks }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="子单号" align="center" prop="planDetailId"  width="150" />
        <el-table-column label="产品名称" align="center" prop="productName" />
        <el-table-column label="产品类型" align="center" prop="productCategory" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="规格型号" prop="specificationModle"  align="center"/>
        <el-table-column label="计量单位" prop="measurementUnit" align="center"/>
        <el-table-column label="单价（元）" prop="unitPrice" align="center"/>
        <el-table-column label="采购数量" prop="procureQuantity" align="center"/>
        <el-table-column label="预算金额（元）" prop="budgetAmount"  align="center" width="150"/>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />

      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getPlan} from "@/api/asset/plan";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 分页信息
      total: 0,
      pageNum: 1,
      pageSize: 10,

      formData: {
        createUserId: undefined,
        createUserName: undefined,
        createDeptName: undefined,
        createTime: null,
        demandTime: null,
        demandType: 0,
        procurePlanReason: undefined,
      },

      procurePlanDetailList:[],
      productCategoryOptions: [],
      demandTypeOptions: [{
        "label": "自采",
        "value": 0
      }, {
        "label": "租赁",
        "value": 1
      }],
    }
  },
  dicts: ['a_procure_purpose','fa_plan_tast_status'],
  computed: {},
  watch: {},
  created() {
    const procurePlanId = this.$route.params && this.$route.params.procurePlanId;
    if (procurePlanId) {
        console.log(procurePlanId)
      getPlan(procurePlanId).then(response => {
        this.formData=response.data;
        this.procurePlanDetailList = response.data.procurePlanDetailList;
        for (let i = 0; i < this.procurePlanDetailList.length; i++) {
          this.procurePlanDetailList[i].productCategory = this.procurePlanDetailList[i].largeCategory+"/"+this.procurePlanDetailList[i].middleCategory+"/"+this.procurePlanDetailList[i].smallCategory;
        }
        this.total = this.procurePlanDetailList.length;
        this.loading = false;
      });
    }
  },
  mounted() {
  },
  methods: {
    /** 关闭按钮 */
    close() {
      const obj = { path: "/procure/plan" };
      this.$tab.closeOpenPage(obj);
    },
  }
}

</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 100px;
    left: 10px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
